import { ButtonDevOnly } from "@/component/ButtonDevOnly";
import { HighLightText } from "@/component/HighLightText";
import { ISessionItem, sessions_mgr } from "@/mgr";
import { show_raw_jsons } from "@/utils/show_raw_jsons";
import { Dropdown, Flex, GetProps, List, Typography } from "antd";
import { useMemo } from "react";
import styles from "./styles.module.scss";
const { Text } = Typography

export interface ISessionItemProps extends GetProps<typeof List.Item> {
  item: ISessionItem;
  show_time?: boolean;
  show_content?: boolean;
  show_account?: boolean;
  dropdown?: GetProps<typeof Dropdown>;
  searching_value?: Unsafe<string>;
}
export function SessionItem(props: ISessionItemProps) {
  const {
    item,
    show_time = true,
    show_content = true,
    show_account,
    dropdown,
    searching_value,
    ..._p
  } = props

  const flag = [
    item.index,
    item.nickName,
    item.content,
    item.datetime,
    show_time,
    show_content,
    show_account,
    searching_value
  ].join()

  const [title_node, desc_node] = useMemo(() => {
    const { contact_type_name, nickName, senderName = nickName } = item

    const account_str = item.raw?.account || ''
    const account = <HighLightText search={searching_value}>{account_str}</HighLightText>
    const talker = <HighLightText search={searching_value}>{nickName}</HighLightText>
    const content_str = (senderName === nickName ? `${senderName}: ` : '') + (item.content || ' ')
    const content = <HighLightText search={searching_value}>{content_str}</HighLightText>

    const title_node = (
      <Flex justify='space-between' gap={10}>
        <Text className={styles.title}>
          {item.index ? `${item.index}.` : void 0}
          {show_account ? account : null}
          <Text type='secondary'>
            {show_account ? '的' : null}
            {contact_type_name}{': '}
          </Text>
          {talker}
        </Text>
        {
          show_time &&
          <Text type='secondary' title={item.raw.nTime} className={styles.n_time}>
            {item.datetime}
          </Text>
        }
      </Flex>
    )
    const desc_node = (
      <Flex justify='space-between' gap={10}>
        {show_content && <Text type='secondary' title={content_str}>{content}</Text>}
        <Flex gap={10} style={{ flexShrink: 0 }}>
          <ButtonDevOnly label='原始数据' onClick={(e: React.MouseEvent) => {
            e.stopPropagation();
            e.preventDefault();
            show_raw_jsons(['会话', item.raw])
          }} />
          <ButtonDevOnly label="提交" onClick={() => sessions_mgr().submit(item)} />
        </Flex>
      </Flex>
    )
    return [title_node, desc_node]
  }, [flag])

  return useMemo(() => {
    const inner = <List.Item
      key={item.userName}
      id={styles.sesson_list_item}
      {..._p}>
      <List.Item.Meta
        title={title_node}
        description={desc_node}
      />
    </List.Item>
    return dropdown ? (
      <Dropdown {...dropdown}>
        {inner}
      </Dropdown>
    ) : inner;
  }, [item, dropdown])
}


